<template>
	<view class="login">
		<view class="logo">
			<image class="avatar" :src="imgHost+'/static/images/logo.png'" mode="aspectFill"></image>
		</view>

		<view class="form">
			<view class="form-item">
				<uni-icons type="icon-iconfontuser" custom-prefix="iconfont" size="24"
					:color="themeColor.theme"></uni-icons>
				<view class="form-input">
					<input v-model="form.mobile" style="padding: 0 32rpx" type="text" placeholder="请输入您的手机号" />
				</view>
			</view>
			<view class="form-item">
				<uni-icons type="icon-iconfonticon-mim" custom-prefix="iconfont" size="24"
					:color="themeColor.theme"></uni-icons>
				<view class="form-input">
					<input v-model="form.password" type="password" style="padding: 0 32rpx" placeholder="请输入您的密码" />
				</view>
			</view>

			<button :loading="loginButton" @click="login()" class="submit-btn" :style="{background: themeColor.theme}">
				登录
			</button>

			<view class="alink">
				<radio :checked="read" @click="setRead" />
				已阅读并同意
				<text @click="pageRoute(`/userPages/agreement/agreement?type=user`)">《用户协议》</text>
				<text @click="pageRoute(`/userPages/agreement/agreement?type=privacy`)">《隐私协议》</text>
			</view>


			<view class="btn-group">
				<view class="login-btn" @click="pageRoute('/userPages/login/forgot-password')">忘记密码</view>
				<text>|</text>
				<view class="login-btn" @click="pageRoute('/userPages/login/login')">手机号授权登录</view>
				<text>|</text>
				<view class="login-btn" @click="pageRoute('/userPages/login/sms_login')">手机验证码登录</view>
			</view>

		</view>

		<gyd-copyright></gyd-copyright>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		reactive,
		toRefs,
		inject,
		ref,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '密码登录',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		read: false,
		form: {
			mobile: '',
			password: '',
		},
		loginButton: false,
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function setRead() {
		state.read = !state.read;
	}

	function login() {
		if (!state.read) {
			util.showTip('请先阅读并同意协议');
			return;
		}

		if (!util.username(state.form.mobile, '手机号')) {
			return;
		}
		if (!util.username(state.form.password, '密码')) {
			return;
		}

		uni.showLoading();

		request.post('login/login', state.form).then(res => {
			console.log('登录结果', res);
			if (res.code == 1) {
				uni.showToast({
					icon: 'success',
					title: res.msg,
				})
				loginSussess(res.data);
			} else {
				uni.hideLoading();
				uni.showToast({
					icon: 'error',
					title: res.msg,
				})
			}

		}).catch(err => {
			console.log(err)
			uni.hideLoading();
			uni.showToast({
				icon: 'none',
				title: err.msg || '登录失败'
			})
		});
	}

	function loginSussess(data) {
		console.log('登录成功', data);
		uni.hideLoading();
		util.setToken(data.token);
		util.setUserInfo(data.user);

		uni.$emit('login_success');
		setTimeout(() => {
			pageTabRoute(`/pages/tabbar/profile/profile`);
		}, 1000);
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		read,
		form,
		loginButton,
	} = toRefs(state);
</script>

<style lang="scss">
	page {
		overflow: hidden;
		height: 100%;
		background-color: $u-bg-reverse-color;
	}

	.login {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 48rpx 48rpx 0;

		.logo {
			margin-top: 85rpx;
			padding-bottom: 50rpx;
		}

		.form {
			padding: 0rpx;

			.form-item {
				@include f-between;
				height: 70rpx;
				padding: 0 $m16;
				background-color: $u-bg-color;
				margin-bottom: $m24;
				border-radius: 40rpx;

				.u-icon {
					margin: 0 $m16;
				}

				.form-input {
					@include f-between;
					flex: 1;
					margin: 0 $m16;

					input {
						flex: 1;
					}
				}
			}

			.submit-btn {
				margin-top: $m24;
				color: #fff;
			}

			.alink {
				@include f-center;
				padding: $m24;
				font-size: 24rpx;

				text {
					margin: 0 $m12;
					font-size: 24rpx;
					color: #125cd7;
				}
			}

			.btn-group {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				margin: $m24 0 0 0;

				.login-btn {
					color: #1866d9;
				}

				text {
					margin: 0 20rpx;
					color: #1866d9;
				}
			}
		}
	}
</style>